<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("modelConfigPath", "cargo");
%>
<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>
<style type="text/css">
	.template{display:none}
	.forCopy{display:none}
	.forEdit{display:none}
	.forEditMore{display:none}
	#propertyName{display:none}
	td input{height:21px; width:98%;border:none;}
	td{height:21px;padding: 2px 2px !important;text-align:center }
</style>
	
<t:panel cssClass="panel-flat form-detailed" customBody="true" customHead="true">
	<input type="hidden" value='${t_refershType }' id="refershType"  />
	<div class="detailed-navbar-content panel-body">
		<t:form modelAttribute="cargo" action="/cargo/cargo/singleSave?refershType=${t_refershType }" method="post" cssClass="form-horizontal">
			<div class="hide">
				 <t:hidden path="cargoId"/>
 				 <t:hidden path="deleteMark"/>	
 				 <t:hidden path="createUserName"/>
		 		 <t:hidden path="createUserId"/>
		 		 <t:hidden path="createDate"/>
		 		 <t:hidden path="shopId"/>
		 		 <input type="hidden" value='${standardUsersJson}' id=standardUsersJson  />
			</div>
			
            <t:formgroup>
                <t:label path="cargoNo" cssClass="col-sm-1" />
                <t:input path="cargoNo" colClass="col-sm-2" />
                <t:label path="cargoName" cssClass="col-sm-1" />
                <t:input path="cargoName" colClass="col-sm-2" />
                <t:label path="unit" cssClass="col-sm-1" />
               <div  class="col-sm-2 col-xs-2">
					<div class="input-group " >
						<span onclick="addUnit()" id="switch" class="input-group-addon"><i class="icon-add"></i></span>
						<t:select2 id="unit" path="unit" placeholder="选择单位" allowClear="true"  ></t:select2>
						<input class="form-control"  id="unit" placeholder="请输入单位名称" type="text" style="display:none" ></input>
					</div>
				</div>
                <t:label path="categoryName" cssClass="col-sm-1" />
                <div  class="col-sm-2 col-xs-2">
					<div class="input-group ">
						<span onclick="addCategory()" id="switch" class="input-group-addon"><i class="icon-add"></i></span>
						<t:select2 id="categoryName" path="categoryName" placeholder="选择分类" allowClear="true" ></t:select2>
						<input class="form-control"  id="categoryName" placeholder="请输入分类名称" type="text" style="display:none" ></input>
					</div>
				</div>
            </t:formgroup>
             <t:formgroup>
                <t:label path="cargoType" cssClass="col-sm-1" />
                
                <t:select2 allowClear="true" placeholder="选择商品类型" path="cargoType" colClass="col-sm-2" />
                <t:label path="shapeCode" cssClass="col-sm-1" />
                <t:input path="shapeCode" colClass="col-sm-2" />
                <t:label path="describes" cssClass="col-sm-1" />
               	<t:textarea  path="describes" colClass="col-sm-5"/>       
            </t:formgroup>
            <div class="form-group">
            	 <div class="col-md-6 col-sm-6" >
					<button type="button" class="btn btn-primary" onclick="addProducts()" >添加规格</button>
				</div>	
				<div class="col-md-6 col-sm-6 " style="text-align:right;margin: 0px;">
					<t:button icon="icon-floppy-disk" laddaType="progress"  onclick="saveData()" cssClass="btn-primary" csize="sm">保存</t:button>
				</div>
		    </div>	
		  <div class="table-responsive " style="height:335px"> 
			  <div  id="addProduct" ></div>
			  
				  <table class="cntable table table-bordered dataTable ">
					  <thead  style="background-color:#F8F9FD">
						  <th id="headerName" style="display:none"><label></label></th>
						  <th class="forCopy" ><label></label></th>
						  <th style="width:250px">产品编号</th>
						  <th style="width:160px">成本价</th>
						  <th style="width:160px">销售价</th>
					  </thead>
					  <tbody>
					  	<tr id="propertyName" style="height:40px">
					  		<td><label></label></td>
					  	</tr>
					  	<tr style="height:40px" class="forEdit">
					  		<td class="first"><label></label><input type="hidden" value='' /></td>
					  		<td class="collocationNo"><input  value="" data-for="collocationNo" type="text" class="form-control  " placeholder="请输入"></td>
					  		<td class="constPrice"><input  value="0"  data-for="constPrice"  class="form-control  " onkeyup="return ValidateNumber(this,value)" placeholder="请输入"></td>
					  		<td class="salePrice"><input  value="0" data-for="salePrice"  class="form-control  " onkeyup="return ValidateNumber(this,value)" placeholder="请输入"></td>
					  	</tr>
					  	<tr style="height:40px" class="forEditMore">
					  		<td class="first"><label></label><input type="hidden" value='' /></td>
					  		<td class="second"><label></label><input type="hidden" value='' /></td>
					  		<td class="collocationNo"><input  value="" data-for="collocationNo" type="text" class="form-control  " placeholder="请输入"></td>
					  		<td class="constPrice"><input  value="0" data-for="constPrice" type="number" class="form-control  " onkeyup="return ValidateNumber(this,value)" placeholder="请输入"></td>
					  		<td class="salePrice"><input  value="0" data-for="salePrice" type="number" class="form-control  " onkeyup="return ValidateNumber(this,value)" placeholder="请输入"></td>
					  	</tr>
					  </tbody>
				  </table>
			</div>
		</t:form>
	</div>

</t:panel>
 <div class="template  row content-group" style="margin:15px 0px 0px 0px;height:50px;padding:0px">
	<label  class="col-sm-1 control-label cursor-pointer text-right">规格名称</label>
	<div class="col-sm-2 standard" >
   		<input  value="" onchange="checkName(this)"  type="text" class="form-control standardName " placeholder="请输入">			
	</div>
	<label for="productNo" class="col-sm-1 control-label cursor-pointer text-right">规格值</label>
	<div class="content-group property col-sm-7">
		<input onchange="addCollocation(this)" type="text" value="" class="tags-input" >
	</div>
	<div class="col-sm-1">
		<button type="button" data-for="delete" class="btn btn-primary" onclick="delProduct(this)" >－</button>		
	</div>	
</div>
<script src="<c:url value='/js/common/chinese.js'/>" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	randomNumber();
	
	//注册下拉框选择展开监听事件
	$("#unit").on("select2:open", function (e) { 
		var units=[];
		var url =$.getVirtualPath()+"/cargo/unit/unitList";
		 $.ajax({
		        type: 'get',
		        dataType: "json",
		        url: url,
		        async: false,
		        success: function (result) {
		        	data=[];			
					if(!$.isNull(result)){
						data = result;
						data.forEach(function(element,index){
							var FitrstName=getPinYinFirstCharacter(element.unitName,null,true);
							units.push({
								id:element.unitName,
								text:element.unitName+"("+FitrstName+")"
							})
						})
					}
		        }
	    });
		var select=this;
		$(select).find("option").remove();
		units.forEach(function(element,index){
			var newOption = new Option(element.text, element.id, false, false);
			
			$(select).append(newOption);	
		})
	});
	
	$("#categoryName").on("select2:open", function (e) { 
		var categories=[];
		var url =$.getVirtualPath()+"/cargo/category/categoryList";
		 $.ajax({
		        type: 'get',
		        dataType: "json",
		        url: url,
		        async: false,
		        success: function (result) {
		        	data=[];			
					if(!$.isNull(result)){
						data = result;
						data.forEach(function(element,index){
							var FitrstName=getPinYinFirstCharacter(element.categoryName,null,true);
							categories.push({
								id:element.categoryName,
								text:element.categoryName+"("+FitrstName+")"
							})
						})
					}
		        }
	    });
		var select=this;
		$(select).find("option").remove();
		categories.forEach(function(element,index){
			var newOption = new Option(element.text, element.id, false, false);
			
			$(select).append(newOption);	
		})
	});
	
	if($(".standardUser").length==0){
		td++;
		var divClass="";
		divClass = "propertyName"+td;
		var tbody=$(".forEdit").clone();
		tbody.addClass("first")
		tbody.removeClass("forEdit").addClass(divClass);
		tbody.find("td").find("label").text("无")
		tbody.attr("id","default");
		tbody.find(".collocationNo").find("input").attr("name","collocationNos");
		
		var cargoNo=$("#cargoNo").val();
		tbody.find(".collocationNo").find("input").val(cargoNo+"-" + (Math.round(Math.random() * 89 + 100)).toString())
		
		tbody.find(".constPrice").find("input").attr("name","costPrices");
		tbody.find(".salePrice").find("input").attr("name","salePrices");
		tbody.find(".first").find("input").attr("name","propertyNameFirsts");
		tbody.find(".first").find("input").val("无")
		$("#propertyName").before(tbody)
		
		headerNum++;
		var divClass="";
		divClass = "standName";
		var header=$(".forCopy").clone();
		header.removeClass("forCopy").addClass(divClass);
		header.addClass("first")
		header.attr("id","mark");
		header.find("label").text("规格")
		$("#headerName").before(header)	
	}
	
});  

var productNum = 0;
var headerNum=0;
var td=0;

var standardName=[];

var propertyName=[];

var collocations=[];

var StandardNameFirst="";
var StandardNameSecond="";
var propertyNameFirst="";
var propertyNameSecond="";

function randomNumber(){
	const now =new Date();	
	var  month=now.getMonth()+1;
	var day=now.getDate();
	var hour=now.getHours();
	var minutes=now.getMinutes();
	var seconds=now.getSeconds();
    var purchaseNo="P-"+ now.getFullYear().toString() + month.toString() + day + hour + minutes + seconds
	$("#cargoNo").val(purchaseNo);
	
}

function addUnit(){
	top.openModal("/cargo/unit/detailed?type="+"add","category_form","单位详情-添加",450,185);
}

function addCategory(){
	top.openModal("/cargo/category/detailed?type="+"add","category_form","分类详情-添加",450,185);
}

function ValidateNumber(e, pnumber){
	if (!/^\d+[.]?\d*$/.test(pnumber))
	{
		e.value = /^\d+(\.\d+)?$/.exec(e.value);
	}else{
		
 	}
	return false;
}

function addProducts(element){
	$("#default").remove();
	$("#mark").remove();
	
	if($(".standardName").length>2){
		$.notify("最多只能添加两条规格!!","warning");
		return;
	}
	var divClass= "";	
	productNum++;
	divClass = "standardName"+productNum;
	
	var productInfo = $('.template').clone();
	console.log($(".standard").length)
	if($(".standard").length==1){
		productInfo.find(".standard").find("input").addClass("first");
		productInfo.find(".standard").find("input").attr("name","standNameFirst")
		productInfo.find(".standard").find("input").val("规格一")
		productInfo.find(".property").find("input").addClass("first");
		
		headerNum++;
		var divClass="";
		divClass = "standName";
		var header=$(".forCopy").clone();
		header.removeClass("forCopy").addClass(divClass);
		header.addClass("first")
		header.find("label").text("规格一")
		$("#headerName").before(header)	
		
	}
	if($(".standard").length==2){
		productInfo.find(".standard").find("input").addClass("second");
		productInfo.find(".standard").find("input").attr("name","standNameSecond")
		productInfo.find(".property").find("input").addClass("second");
		productInfo.find(".standard").find("input").val("规格二")
		
		headerNum++;
		var divClass="";
		divClass = "standName";
		var header=$(".forCopy").clone();
		header.removeClass("forCopy").addClass(divClass);
		header.addClass("second")
		header.find("label").text("规格二")
		$("#headerName").before(header)	
	}
	
	productInfo.removeClass("template").addClass(divClass);
	productInfo.removeClass("template").addClass("standardUser");
	productInfo.find("[data-for=delete]").attr("data-delete",divClass);

	$("#addProduct").before(productInfo); 
	
	productInfo.find(".property").find(".tags-input").tagsinput();
	drawTabel();
	addHeader();
}


function addHeader(element,tabelHd){

		
		if($(tabelHd).hasClass("first")){
			$("th.first").find("label").text(element)
		}
		if($(tabelHd).hasClass("second")&&$("th.second").length>0){
			$("th.second").find("label").text(element)
		}
		
		paint();

}
var propertyFirsts=[];
var propertySeconds=[];
function addCollocation(element){
	var input=$(element).parent().siblings("div").find("input");
	var otherName=$(element).val();
	if($(input).hasClass("first")){
		propertyNameFirst=$(element).val();	
	
	}else if($(input).hasClass("second")){
		propertyNameSecond=$(element).val();
	}
	
	propertyFirsts=[];
	propertySeconds=[];
	if(!$.isNull(propertyNameFirst)){
		propertyFirsts=propertyNameFirst.split(",");	
	}
	
	if(!$.isNull(propertyNameSecond)){
		 propertySeconds=propertyNameSecond.split(",");
	}

	if(!$.isNull(propertyNameSecond)&&!$.isNull(propertyNameFirst)){
		collocations=[];
		for(i=0;i<propertyFirsts.length;i++){
			for(j=0;j<propertySeconds.length;j++){
				collocations.push({
					first:propertyFirsts[i],
					second:propertySeconds[j]
				})
			}
		}
			
	}
	paint(element);

}

function paint(element){
	
	$("tr.first").remove()
	
	if($("th.first").length==1&&$("th.second").length==0){
		
		for(i=0;i<propertyFirsts.length;i++){
			td++;
			var divClass="";
			divClass = "propertyName"+td;
			var tbody=$(".forEdit").clone();
			tbody.addClass("first")
			tbody.removeClass("forEdit").addClass(divClass);
			tbody.find("td").find("label").text(propertyFirsts[i])
			tbody.find(".collocationNo").find("input").attr("name","collocationNos");
			
			var cargoNo=$("#cargoNo").val();
			tbody.find(".collocationNo").find("input").val(cargoNo+"-" + (Math.round(Math.random() * 89 + 100)).toString())
			
			tbody.find(".constPrice").find("input").attr("name","costPrices");
			tbody.find(".salePrice").find("input").attr("name","salePrices");
			tbody.find(".first").find("input").attr("name","propertyNameFirsts");
			
			tbody.find(".first").find("input").val(propertyFirsts[i]);
			$("#propertyName").before(tbody)
			
		}
	}
	if($("th.first").length==1&&$("th.second").length==1){
	
		$("tr.collocation").remove()
		
		if($.isNull(collocations)){
			td++;
			var divClass="";
			
			divClass = "propertyName"+td;
			var tbody=$(".forEditMore").clone();
			tbody.removeClass("forEditMore").addClass(divClass);
			tbody.addClass("collocation");
			tbody.find("td.first").find("label").text("");
			tbody.find("td.second").find("label").text("");
			tbody.find(".collocationNo").find("input").attr("name","collocationNos");
			
			var cargoNo=$("#cargoNo").val();
			tbody.find(".collocationNo").find("input").val(cargoNo+"-" + (Math.round(Math.random() * 89 + 100)).toString())
			
			tbody.find(".constPrice").find("input").attr("name","costPrices");
			tbody.find(".salePrice").find("input").attr("name","salePrices");
			tbody.find(".first").find("input").attr("name","propertyNameFirsts");
			tbody.find(".second").find("input").attr("name","propertyNameSeconds");
			
			
			$("#propertyName").before(tbody)
			console.log("来了")
		}
		
		for(i=0;i<collocations.length;i++){
			td++;
			var divClass="";
			
			divClass = "propertyName"+td;
			var tbody=$(".forEditMore").clone();
			tbody.removeClass("forEditMore").addClass(divClass);
			tbody.addClass("collocation");
			tbody.find("td.first").find("label").text(collocations[i].first);
			tbody.find("td.second").find("label").text(collocations[i].second);
		
			tbody.find(".collocationNo").find("input").attr("name","collocationNos");
			
			var cargoNo=$("#cargoNo").val();
			tbody.find(".collocationNo").find("input").val(cargoNo+"-" + (Math.round(Math.random() * 89 + 100)).toString())
			
			tbody.find(".constPrice").find("input").attr("name","costPrices");
			tbody.find(".salePrice").find("input").attr("name","salePrices");
			
			tbody.find(".first").find("input").attr("name","propertyNameFirsts");
			tbody.find(".second").find("input").attr("name","propertyNameSeconds");
			
			tbody.find(".first").find("input").val(collocations[i].first);
			tbody.find(".second").find("input").val(collocations[i].second);
			$("#propertyName").before(tbody);
		}
	}	
}

function delProduct(element){
	
	if($(".standardUser").length==1){

		$.notify("请至少保留一条规格!!","warning");
		return;
		
	}
	
	if($(element).parent().siblings(".standard").find("input").hasClass("first")){
		StandardNameFirst=""
			$("tr.first").remove()
			$("tr.collocation").remove()
			collocations=[];		
	}
	if($(element).parent().siblings(".standard").find("input").hasClass("second")){
		StandardNameSecond=""
			$("tr.second").remove();
			$("tr.collocation").remove();
			collocations=[];	
	}

	if($(element).parent().siblings(".standard").find("input").hasClass("second")){
		$(".standName.second").remove();
		propertySeconds=[];
		propertyNameSecond="";
		
	}else if($(element).parent().siblings(".standard").find("input").hasClass("first")){
		$(".standName.first").remove();
		propertyFirsts=[];
		propertyNameFirst="";
	}

	if($(".standardUser").length>0){
		
		if($(element).parent().parent().siblings(".standardUser").find(".standard").find("input").hasClass("second")){
			$(element).parent().parent().siblings(".standardUser").find(".standard").find("input").removeClass("second");
			$(element).parent().parent().siblings(".standardUser").find(".property").find("input").removeClass("second");
			$(element).parent().parent().siblings(".standardUser").find(".first").find("input").attr("name","propertyNameFirsts");
			$(element).parent().parent().siblings(".standardUser").find(".standard").find("input").addClass("first");
			$(element).parent().parent().siblings(".standardUser").find(".property").find("input").addClass("first");
			$(".standName.second").removeClass("second").addClass("first");
			
			
			console.log("我改变过")
		}
		
	}
	$(element).parent().parent().remove();
	
	
	

	paint();
	
}



/* 获取规格名称数组 */

function checkName(element){
	var headerName=$(element).val();


		if($(element).hasClass("first")){
			StandardNameFirst=headerName;
		}
		
		if($(element).hasClass("second")){
			StandardNameSecond=headerName;
		}
	/* 获取规格名称数组 */

	if($(".standardName").length>2){
	var nameOne=$(element).parent().parent().siblings(".standardUser").find(".standard").find("input").val();	


	if(nameOne==$(element).val())
		$.notify("规格名称已存在相同!!","warning");
	}	
	addHeader($(element).val(),element);
}

function drawTabel(){
	if($(".standardUser").length==1){
		var StandUserName=$(".standardUser").find(".standard").find("input").val()
		console.log(StandUserName+"fff")
	}
}


function saveData(lBtn){
	if (!$("form:first").valid()){
		return;
	}
	lBtn.start();
	$("form:first").submit();
}	
function actionResultCallBack(){
	var baseOperate={
			close:true,
			refresh:false
	}
	if($("#refershType").val()=="supplyCargo"){
		top.supplyCargo_form.formSubmit();
	}else{
		top.main.formSubmit();
	}
	
	return baseOperate;
	
}

</script>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formtags.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/ui/prism.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/forminputs.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formtags.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formbuttons.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formpickers.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formselects.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/formstyling.jsp"%>
<%@ include file="/WEB-INF/views/shared/master/dialog.jsp"%>
<%@ include file="/WEB-INF/views/shared/base/scripts/limitless/default/notifications.jsp"%>

<%@ include file="/WEB-INF/views/shared/master/contentFooter.jsp"%>